<template>
  <view class="order-detail-container">

    <!-- 基本信息 -->
    <view class="detail-content">
      <view class="section-title">{{$t('order_detail.orderDetail')}}</view>
      <view class="info-section">
        <view class="info-item">
          <text class="label">{{$t('order_detail.orderNumber')}}：</text>
          <text class="value">{{ orderInfo.outpatient_no || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.createData')}}：</text>
          <text class="value">{{ formatDate(orderInfo.create_datetime) }}</text>
        </view>
      </view>
    </view>

    <!-- 医生信息 -->
    <view class="detail-content">
      <view class="section-title">{{$t('order_detail.doctorName')}}</view>
      <view class="info-section">
        <view class="info-item">
          <text class="label">{{$t('order_detail.doctorName')}}：</text>
          <text class="value">{{ orderInfo.doctor_info?.name || orderInfo.doctor_info?.username || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.doctorEmail')}}：</text>
          <text class="value">{{ orderInfo.doctor_info?.email || '' }}</text>
        </view>
      </view>
    </view>

    <!-- 患者信息 -->
    <view class="detail-content">
      <view class="section-title">{{$t('order_detail.patientName')}}</view>
      <view class="info-section">
        <view class="info-item">
          <text class="label">{{$t('order_detail.userName')}}：</text>
          <text class="value">{{ orderInfo.patient_info?.username || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.patientName')}}：</text>
          <text class="value">{{ orderInfo.patient_info?.name || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.email')}}：</text>
          <text class="value">{{ orderInfo.patient_info?.email || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.patientBirthday')}}：</text>
          <text class="value">{{ formatDate(orderInfo.patient_info?.date_of_birth) || '' }}</text>
        </view>
      </view>
    </view>

    <!-- 产品信息 -->
    <view class="detail-content">
      <view class="section-title">{{$t('order_detail.productName')}}</view>
      <view class="products-section">
        <view v-for="(product, index) in orderInfo.good_info" :key="product.id || index" class="product-item">
          <view class="product-header">
            <text class="product-title">{{ product.name || 'N/A' }}</text>
            <text class="product-index">#{{ index + 1 }}</text>
          </view>

          <view class="product-details">
            <view class="info-section">
              <view class="info-item">
                <text class="label">{{$t('order_detail.productDescription')}}：</text>
                <text class="value">{{ product.describe || 'N/A' }}</text>
              </view>
              <view class="info-item">
                <text class="label">{{$t('order_detail.productDuration')}}：</text>
                <text class="value">{{ product.duration || '0' }} {{$t('order_detail.minutes')}}</text>
              </view>
              <view class="info-item">
                <text class="label">{{$t('order_detail.productPrice')}}：</text>
                <text class="value amount">$ {{ product.price || '0.00' }}</text>
              </view>
              <view class="info-item" v-if="product.show_img">
                <text class="label">{{$t('order_detail.productImage')}}：</text>
                <view class="value">
                  <image :src="product.show_img" class="product-image" mode="aspectFit" />
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 总计信息 -->
        <!-- <view class="total-section" v-if="orderInfo.good_info && orderInfo.good_info.length > 0">
          <view class="total-item">
            <text class="total-label">商品总数量：</text>
            <text class="total-value">{{ orderInfo.good_info.length }} 项</text>
          </view>
          <view class="total-item">
            <text class="total-label">总金额：</text>
            <text class="total-value amount">$ {{ getTotalPrice(orderInfo.good_info) }}</text>
          </view>
        </view> -->
      </view>
    </view>

    <!-- 诊断信息 -->
    <view class="detail-content">
      <view class="section-title">诊断信息</view>
      <view class="info-section">
        <view class="info-item">
          <text class="label">{{$t('order_detail.mainComplaint')}}：</text>
          <text class="value">{{ orderInfo.main_complaint || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.inspect')}}：</text>
          <text class="value">{{ orderInfo.inspect || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.symptom')}}：</text>
          <text class="value">{{ orderInfo.symptom || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.part')}}：</text>
          <text class="value">{{ orderInfo.part || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.method')}}：</text>
          <text class="value">{{ orderInfo.method || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.result')}}：</text>
          <text class="value">{{ orderInfo.result || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.describe')}}：</text>
          <text class="value">{{ orderInfo.describe || 'N/A' }}</text>
        </view>
      </view>
    </view>

    <!-- 治疗计划 -->
    <view class="detail-content">
      <view class="section-title">治疗计划</view>
      <view class="info-section">
        <view class="info-item">
          <text class="label">{{$t('order_detail.objective')}}：</text>
          <text class="value">{{ orderInfo.objective || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.painMode')}}：</text>
          <text class="value">{{ orderInfo.pain_mode || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.painValue')}}：</text>
          <text class="value">{{ orderInfo.pain_value || 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.sleepDifficulty')}}：</text>
          <text class="value">{{ orderInfo.type === true ? $t('order_detail.yes') : orderInfo.type === false ? $t('order_detail.no') : 'N/A' }}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.planDay')}}：</text>
          <text class="value">{{ orderInfo.plan_day || '0' }} {{$t('order_detail.days')}}</text>
        </view>
        <view class="info-item">
          <text class="label">{{$t('order_detail.planTimes')}}：</text>
          <text class="value">{{ orderInfo.plan_ce || '0' }} {{$t('order_detail.times')}}</text>
        </view>
      </view>
    </view>

    <!-- 附件 -->
    <view class="detail-content" v-if="orderInfo.attachments && orderInfo.attachments.length > 0">
      <view class="section-title">{{$t('order_detail.attachments')}}</view>
      <view class="info-section">
        <view class="info-item" v-for="(attachment, index) in orderInfo.attachments" :key="attachment.id">
          <text class="label">{{$t('order_detail.attachments')}} {{index + 1}}：</text>
          <view class="value">
            <text class="file-name">{{ attachment.name }}</text>
            <view class="file-info">
              <text class="file-size">{{ formatFileSize(attachment.size) }}</text>
            </view>
            <image v-if="isImageFile(attachment.name)" :src="attachment.url" class="attachment-image" mode="aspectFit" />
          </view>
        </view>
      </view>
    </view>

    <!-- 签名 -->
    <view class="detail-content" v-if="orderInfo.signature">
      <view class="section-title">{{$t('order_detail.signature')}}</view>
      <view class="info-section">
        <view class="info-item">
          <text class="label">{{$t('order_detail.signature')}}：</text>
          <view class="value">
            <image :src="getSignatureUrl(orderInfo.signature)" class="signature-image" mode="aspectFit" />
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { formatDate } from '@/utils/date.js'
import { getOrderDetail } from '@/api/order.js'

export default {
  name: 'OrderDetail',
  data() {
    return {
      orderInfo: {},
      outpatient_no: ""
    }
  },

  onLoad(options) {
    this.setTitle()
    this.outpatient_no = options.outpatient_no
    this.loadOrderDetail()
  },

  methods: {
    setTitle() {
      // 国际化页面标题
      if (this.$t) {
        uni.setNavigationBarTitle({
          title: this.$t('order_detail.orderDetail')
        })
      }
    },
    async loadOrderDetail() {
      const response = await getOrderDetail(this.outpatient_no)
      if (response.message == "success") {
        this.orderInfo = response.result
      }
    },

    formatDate(dateString) {
      if (!dateString) return 'N/A'
      return formatDate(dateString)
    },

    formatFileSize(bytes) {
      if (!bytes) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },

    isImageFile(fileName) {
      if (!fileName) return false
      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
      const extension = fileName.toLowerCase().substring(fileName.lastIndexOf('.'))
      return imageExtensions.includes(extension)
    },

    getSignatureUrl(signaturePath) {
      if (!signaturePath) return ''
      // 如果是完整URL，直接返回
      if (signaturePath.startsWith('http')) {
        return signaturePath
      }
      // 如果是相对路径，拼接基础URL
      return `http://nv38644510d.vicp.fun/${signaturePath}`
    },

    // 计算总价
    getTotalPrice(goodInfo) {
      if (!goodInfo || !Array.isArray(goodInfo) || goodInfo.length === 0) {
        return '0.00'
      }

      const total = goodInfo.reduce((sum, item) => {
        return sum + (parseFloat(item.price) || 0)
      }, 0)

      return total.toFixed(2)
    }
  }
}
</script>

<style scoped>
.order-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.detail-content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 2rpx solid #e3eaf7;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 28rpx;
  color: #666;
  min-width: 180rpx;
  flex-shrink: 0;
}

.value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.amount {
  color: #ff6b35;
  font-weight: bold;
}

.product-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.attachment-image {
  width: 300rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.signature-image {
  width: 400rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.file-name {
  font-weight: bold;
  color: #1976d2;
  display: block;
  margin-bottom: 5rpx;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 10rpx;
}

.file-size {
  font-size: 24rpx;
  color: #888;
  background-color: #f5f5f5;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
}

/* 产品信息样式 */
.products-section {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.product-item {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  border: 1rpx solid #e9ecef;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #dee2e6;
}

.product-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1976d2;
  flex: 1;
}

.product-index {
  font-size: 24rpx;
  color: #6c757d;
  background-color: #e9ecef;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.product-details {
  margin-top: 10rpx;
}

/* 总计信息样式 */
.total-section {
  background-color: #fff3cd;
  border: 1rpx solid #ffeaa7;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.total-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.total-item:last-child {
  margin-bottom: 0;
}

.total-label {
  font-size: 28rpx;
  color: #856404;
  font-weight: 500;
}

.total-value {
  font-size: 28rpx;
  color: #856404;
  font-weight: bold;
}
</style> 